import { Card, Avatar } from "antd";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { useParams, Link } from "react-router-dom";
import { useUser } from "../../store/action";
import TopicList from "../../component/topicsList";
import { UserOutlined } from "@ant-design/icons";
import FromNow from "../../component/fromnow";

export default function User() {
    let { loginname } = useParams();
    let getData = useUser();
    let { data, loading } = useSelector((state) => state.user);

    let {
        recent_replies = [],
        recent_topics = [],
        avatar_url,
        create_at,
        githubUsername,
        score,
    } = data;
    console.log(data, loading);
    useEffect(() => {
        getData(loginname);
    }, [loginname]);
    return (
        <div className="user-page">
            <Card loading={loading}>
                <Link to={`/user/${loginname}`}>
                    <Avatar icon={<UserOutlined />} src={avatar_url} />
                </Link>
                <span>{githubUsername}</span>
                <p>{score}积分</p>
                注册时间
                <FromNow date={create_at} />
            </Card>
            <Card loading={loading} title={"最近创建的话题"} type={"inner"}>
                <TopicList loading={loading} data={recent_replies} />
            </Card>
            <Card loading={loading} title={"最近参与的话题"} type={"inner"}>
                <TopicList loading={loading} data={recent_topics} />
            </Card>
        </div>
    );
}
